<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    .color_red {
        color: red;
    }
</style>

<body>



    <div id="app">

        <table>
            <tr>
                <td>账号:</td>
                <td>
                    <input type="text" ref="user" v-model="username" @blur="getusername">
                    <div v-show="username.length == 0" class="color_red">{{pdname}}</div>
                </td>
            </tr>
            <tr>
                <td>密码:</td>
                <td>
                    <input type="password" ref="pass" v-model="password" @blur="getpassword">
                    <div v-if="password.length != 6" class="color_red">{{pdpass}}</div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="登录" v-hhh @click="submit"></td>
            </tr>
        </table>


    </div>





    <script src="./vue.js"></script>
    <script>



        // 作业：结合模板引用和自定义指令，实现表单的验证和错误样式的展示（标记红色，错误信息提示）

        let app = Vue.createApp({
            data() {
                return {
                    username: "",
                    password: "",
                    pdname: "",
                    pdpass: ""
                }
            },
            methods: {
                submit() {
                    // console.log(this.$refs);
                    let user = this.$refs.user
                    let pass = this.$refs.pass

                    if (user.value == '') {
                        this.pdname = "账号不能为空"
                    } else {
                        this.pdname = ""
                    }
                    if (pass != 6) {
                        this.pdpass = "请输入正确的密码"
                    } else {
                        this.pdpass = ""
                    }
                }
            },


            // 自定义指令
            directives: {
                hhh(el, binding, vnode, prevVnode){
                    // console.log(binding.instance.username);
                    let user = this.$refs.user
                    let pass = this.$refs.pass

                    if (user.value == '') {
                        this.pdname = "账号不能为空"
                    } else {
                        this.pdname = ""
                    }
                    if (pass != 6) {
                        this.pdpass = "请输入正确的密码"
                    } else {
                        this.pdpass = ""
                    }
                }
            }


        })



        app.mount("#app")








    </script>

</body>

</html>